<template>
  <div class="personal">
    <div>
      <el-dialog
        :visible.sync="dialogFormVisible"
        title="修改密码"
        center
        width="30%"
        :show-close="false"
      >
        <el-form
          ref="formPassword"
          :model="formPassword"
          label-width="100px"
          class="personal-form-password"
          :rules="rules"
        >
          <el-form-item label="旧密码：" prop="oldPassword">
            <el-input v-model="formPassword.oldPassword" type="password" />
          </el-form-item>
          <el-form-item label="新密码：" prop="newPassword">
            <el-input v-model="formPassword.newPassword" type="password" />
          </el-form-item>
          <el-form-item label="确认密码：" prop="checkPassword">
            <el-input v-model="formPassword.checkPassword" type="password" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handlePassCancel">取 消</el-button>
          <el-button type="primary" @click="handlePassConfirm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="personal-header">
      <el-row :gutter="80" type="flex" justify="center">
        <el-col :span="12">
          <div class="personal-header-left">
            <box-border title-button="个人资料" />
            <div class="personal-header-left-content">
              <div class="personal-header-left-content-img">
                <el-avatar
                  :size="100"
                  :src="userInfo.avatar"
                />
              </div>
              <div class="personal-header-left-content-text">
                <ul>
                  <li>
                    名字：<span v-show="!handleUserInfo">{{
                      userInfo.nickName
                    }}</span>
                    <span
                      v-show="handleUserInfo"
                    ><el-input
                      v-model="newUserInfo.nickName"
                      placeholder=""
                    /></span>
                  </li>
                  <li>
                    年龄：<span v-show="!handleUserInfo">{{
                      userInfo.age
                    }}</span>
                    <span
                      v-show="handleUserInfo"
                    ><el-input
                      v-model="newUserInfo.age"
                      placeholder=""
                    /></span>
                  </li>
                  <li>
                    年级：<span v-show="!handleUserInfo">{{
                      userInfo.grade
                    }}</span>
                    <span
                      v-show="handleUserInfo"
                    ><el-input
                      v-model="newUserInfo.grade"
                      placeholder=""
                    /></span>
                  </li>
                  <li>
                    QQ：<span v-show="!handleUserInfo">{{ userInfo.qq }}</span>
                    <span
                      v-show="handleUserInfo"
                    ><el-input
                      v-model="newUserInfo.qq"
                      placeholder=""
                    /></span>
                  </li>
                </ul>
                <ul>
                  <li>
                    性别：<span v-show="!handleUserInfo">{{
                      userInfo.sex
                    }}</span>
                    <span
                      v-show="handleUserInfo"
                    ><el-radio
                      v-model="newUserInfo.sex"
                      label="男"
                    >男</el-radio><el-radio
                      v-model="newUserInfo.sex"
                      label="女"
                    >女</el-radio></span>
                  </li>
                  <li>
                    手机号：<span v-show="!handleUserInfo">{{
                      userInfo.mobile
                    }}</span>
                    <span
                      v-show="handleUserInfo"
                    ><el-input
                      v-model="newUserInfo.mobile"
                      placeholder=""
                    /></span>
                  </li>
                  <li>
                    微信：<span v-show="!handleUserInfo">{{
                      userInfo.vchat
                    }}</span>
                    <span
                      v-show="handleUserInfo"
                    ><el-input
                      v-model="newUserInfo.vchat"
                      placeholder=""
                    /></span>
                  </li>
                  <li>
                    邮箱：<span v-show="!handleUserInfo">{{
                      userInfo.email
                    }}</span>
                    <span
                      v-show="handleUserInfo"
                    ><el-input
                      v-model="newUserInfo.email"
                      placeholder=""
                    /></span>
                  </li>
                </ul>
              </div>
              <div class="personal-header-left-content-button">
                <el-button
                  v-if="!handleUserInfo"
                  round
                  type="primary"
                  icon="el-icon-edit-outline"
                  @click="changUserInfo"
                >修改信息</el-button>
                <el-button
                  v-else
                  round
                  type="primary"
                  icon="el-icon-edit-outline"
                  @click="saveUserInfo"
                >保存信息</el-button>
                <el-button
                  round
                  type="warning"
                  icon="el-icon-edit"
                  @click="handlePassword"
                >修改密码</el-button>

                <el-button
                  round
                  type="danger"
                  icon="el-icon-error"
                  @click="outLogin"
                >退出登入</el-button>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="personal-header-right">
            <box-border title-button="收藏课程" />
            <div class="personal-header-right-content">
              <class-model
                v-for="userCollect in userCollectClass"
                :key="userCollect.class_id"
                class="class-model"
                width-height="width:180px;height:182px"
              >
                <template v-slot:class-img>
                  <img :src="userCollect.class_img" alt="" style="width:100%;height:100%">
                </template>
                <template v-slot:class-name>
                  <div>{{ userCollect.currentname }}</div>
                </template>
                <template v-slot:class-buy>
                  <a @click="buyClass(userCollect.class_id)">马上购买</a>
                </template>
                <template v-slot:class-cancel>
                  <a @click="handleCollectClass(userCollect.class_id)">取消收藏</a>
                </template>
              </class-model>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="personal-footer">
      <el-row :gutter="80">
        <el-col :span="12">
          <div class="personal-footer-left">
            <box-border title-button="课时情况" />
            <div class="personal-footer-left-content">
              <bar-echarts />
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <box-border title-button="我的课程" />
          <div class="personal-footer-class-model">
            <class-model v-for="userClass in userClassList " :key="userClass.class_id" class="class-model" width-height="width:180px;height:180px">
              <template v-slot:class-img>
                <img :src="userClass.class_img" style="width:100%;height:100%;">
              </template>
              <template v-slot:class-name>
                <div>{{ userClass.currentname }}</div>
              </template>
              <template v-slot:class-buy>
                <router-link to="/class/myclass">查看详情</router-link>
              </template>
            </class-model>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

import BarEcharts from './BarEcharts'
export default {
  components: {
    BarEcharts
  },
  data() {
    var vaildatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.formPassword.newPassword !== '') {
          this.$refs.formPassword.validateField('checkPassword')
        }
        callback()
      }
    }
    var vaildateCheckPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入新密码'))
      } else {
        if (value === this.formPassword.newPassword) {
          callback()
        } else {
          callback(new Error('2次输入密码不一致'))
        }
      }
    }
    return {
      handleUserInfo: false,
      newUserInfo: {
        nickName: null,
        qq: null,
        grade: null,
        email: null,
        vchat: null,
        age: null,
        mobile: null,
        addr: null,
        sex: null
      },
      userClassList: [],
      userCollectClass: [],
      dialogFormVisible: false,
      formPassword: {
        newPassword: '',
        oldPassword: '',
        checkPassword: ''
      },
      rules: {
        oldPassword: [
          { required: true, message: '请输入旧的密码', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, validator: vaildatePass, trigger: 'blur' }
        ],
        checkPassword: [
          { required: true, validator: vaildateCheckPass, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 退出
    outLogin() {
      this.$store.dispatch('user/resetToken')
      this.$router.push('/home')
    },
    // 修改用户信息
    changUserInfo() {
      this.newUserInfo = { ...this.userInfo }
      this.handleUserInfo = true
    },
    // 保存用户信息
    async saveUserInfo() {
      const result = await this.$API.user.changUserInfo(this.newUserInfo)
      if (result.code === 200) {
        this.$store.dispatch('user/getUserInfo').then((res) => {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
        })
      }
      this.handleUserInfo = false
    },
    // 修改密码
    handlePassword() {
      this.dialogFormVisible = true
    },
    // 取消修改
    handlePassCancel() {
      Object.assign(this.formPassword, this.$options.data().formPassword)
      this.dialogFormVisible = false
    },
    // 确定修改
    handlePassConfirm() {
      this.$refs.formPassword.validate(async(valid) => {
        if (valid) {
          const result = await this.$API.user.updateUserPass({ password: this.formPassword.newPassword })
          if (result.code === 200) {
            this.$message({
              message: '修改密码成功',
              type: 'success'
            })
            this.dialogFormVisible = false
            Object.assign(this.formPassword, this.$options.data().formPassword)
          }
        } else {
          this.$message({
            message: '请填写正确信息',
            type: 'error'
          })
          return false
        }
      })
    },
    // 获取用户已约课程
    async getUserClassList() {
      const result = await this.$API.user.getUserClassList(1, 6)
      this.userClassList = result.data.rows
    },
    // 获得用户个人收藏
    async getUserCollectClass() {
      const result = await this.$API.user.getUserCollectClass({
        page: 1,
        size: 5,
        start_time: '',
        last_time: '',
        currentname: ''
      })
      this.userCollectClass = result.data.rows
    },
    // 取消用户收藏
    async handleCollectClass(classId) {
      this.$confirm(`确定要取消收藏吗`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }
      ).then(async() => {
        await this.$API.classAPI.cancelCollectClass(classId)
        this.getUserCollectClass()
      }).catch(() => {
        this.$message.error('取消收藏失败')
      })
    },
    buyClass(classId) {
      this.$router.push({
        name: 'ClassInfo',
        query: {
          classId
        }
      })
    }
  },
  computed: {
    ...mapState({
      userInfo: (state) => {
        return state.user.userInfo || {}
      }
    })
  },
  mounted() {
    this.getUserClassList()
    this.getUserCollectClass()
  }
}
</script>

<style lang="scss" scoped>
.personal {
  min-width: 1200px;
  margin: 80px 0px;
  .personal-form-password {
    padding: 15px;
    .el-form-item {
      font-size: 18px;
    }
  }
  .personal-header {
    .personal-header-left-content {
      margin: 40px 0px;
      .personal-header-left-content-img {
        margin-right: 1%;
        float: left;
        left: 0;
        top: -3%;
      }
      .personal-header-left-content-text {
        font-size: 15px;
        font-family: "Hiragino Sans GB";
        display: flex;
        justify-content: space-around;
        align-items: center;
        ul {
          margin-top: 25px;
          height: 100%;
        }
        li {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding: 15px 0 20px 0;
        }
      }
      .personal-header-left-content-button {
        display: flex;
        width: 100%;
        justify-content: space-around;
        margin-top: 40px;
      }
    }
    .personal-header-right {
      width: 100%;
      .personal-header-right-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
      }
    }
  }
  .personal-footer {
    width: 100%;
    margin: 70px 0;
    .personal-footer-class-model{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
    }
    .personal-footer-left {
      height: 500px;
      .personal-footer-left-content {
        width: 100%;
        margin-top: 70px;
      }
    }
  }
}
</style>
